@import '../../styles/variables';
@import '../../styles/mixins';
@import './_DONavigationVariables';

:global {
  .od-Navigation-link {
    width: 100%;
    height: $od-Header-height;
    display: block;
    padding-left: 16px;
    padding-right: 16px;
    line-height: $od-Header-height;
    color: $ms-color-white;
    font-size: $ms-font-size-l - 1;

    &:hover {
      color: $ms-color-neutralLighter;
    }

    &:focus {
      color: $ms-color-white;
      box-shadow: inset 0px 0px 0px 1px $ms-color-white;

      @include high-contrast {
        box-shadow: inset 0px 0px 0px 1px WindowText;
      }

      @include high-contrast-black-on-white {
        box-shadow: inset 0px 0px 0px 1px Highlight;
      }
    }

    // State - Is Selected
    &.is-selected {
      color: $ms-color-neutralTertiary;

      .ms-Icon {
        color: $ms-color-neutralTertiary;
      }
    }

    .ms-Icon {
      color: $ms-color-white;
      @include ms-margin-left(6px);
      transition: transform 0.4s;
      margin-top: 1px;
      line-height: 40px;
      height: 45px;
      vertical-align: bottom;

      @include high-contrast {
        transition: none;
      }
    }

    // Responsive changes
    @media (min-width: $od-Header-bannerWidth) {
      display: inline-block;
      width: auto;

      &:hover {
        &:before {
          content: '';
          height: 2px;
          left: 0;
          right: 0;
          position: absolute;
          bottom: 0;
          background-color: $ms-color-neutralTertiary;
        }
      }

      &.is-selected {
        &:before {
          content: '';
          height: 2px;
          left: 0;
          right: 0;
          position: absolute;
          bottom: 0;
          background-color: $ms-color-neutralTertiary;
        }
      }
    }
  }
}
